<template>
  <div class="app-container">
    <div class="customContainer">
      <div class="customHeader">
        <div class="bottom_box_total">
          <div style="margin-bottom:10px">礼品店外调拨明细表</div>
          <span class="pr" style="margin-left:6px;"> 调拨单号：{{order_id}}</span>
          <span class="pr"> 调出仓：{{warehouse_out}}</span>
          <span class="pr">调入仓：{{warehouse_in}}</span>
          <span class="pr">入库时间：{{nowtime}}</span>
        </div>
      </div>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            <b>{{scope.$index + 1}}</b>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="60" height="60" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
        <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="神采编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label='成本价（元）'>
          <template slot-scope="scope">
            <!-- 保留小数 -->
            {{scope.row.money_cost|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="实出库数量（个）" prop="out_num"></el-table-column>
        <el-table-column align="center" label="实出库金额（元）" prop="out_money">
          <template slot-scope="scope">
            <!-- 保留小数 -->
            {{scope.row.out_money|keepTwoNum}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box" v-if="list">
      <span class="pull-right mt10"
        style="font-size:14px;color:#606266">　实出库数量合计：{{returnNum}}&#x3000;&#x3000;　实出库金额合计：{{returnMoney|keepTwoNum}}&#x3000;&#x3000;</span>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/report/gift_exportStore_detail';
export default {
  data() {
    return {
      warehouse_out: '',
      order_id: '',
      warehouse_in: '',
      nowtime: '',
      list: null,
      listLoading: false,
      formInline: {
        id: '',
        type: '',
        begin_time: '',
        end_time: ''
      },
      returnNum: 0,
      returnMoney: 0
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => { 
        if(vm.$route.query.row) {
          vm.formInline.id = vm.$route.query.row.id;
          vm.formInline.type = vm.$route.query.row.type;
          vm.formInline.begin_time = vm.$route.query.global.begin_time;
          vm.formInline.end_time = vm.$route.query.global.end_time;
          vm.warehouse_out = vm.$route.query.row.house_out_name;
          vm.order_id = vm.$route.query.row.order_no;
          vm.warehouse_in = vm.$route.query.row.house_in_name;
          vm.nowtime = vm.$route.query.row.time; 
        } 
        vm.fetchData(); 
    });
  }, 
  methods: {
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then(response => {
          // console.log(11, response);
          this.list = response.data;
          let list = this.list;
          this.returnNum = 0;
          this.returnMoney = 0;
          if (list.length > 0) {
            for (let key in list) {
              this.returnNum += parseInt(list[key].out_num);
              this.returnMoney += parseFloat(list[key].out_money);
            }
          } 
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style scoped>
.bottom_box_total {
  font-size: 14px;
  color: #606266;
}
.pr {
  padding-right: 15px;
}
</style>